'use strict';
import * as d3 from "d3";
import csv from "./assets/shuju.csv";

d3.csv(csv).then((data, error) => { 
  if (error) {
    console.log(error);
  } else {
    // 将字符串转换为数值
    data.forEach(function(d) {
      d["Start Year"] = +d["Start Year"];
      d["Count"] = +d["Count"];
    });

    var droughtData = data.filter(function(d) {
      return d["Disaster Type"] === "Drought";
    });

    var floodData = data.filter(function(d) {
      return d["Disaster Type"] === "Flood";
    });

    var BlizzardData = data.filter(function(d) {
      return d["Disaster Type"] === "Blizzard/Winter storm or Hail";
    });

    var LightningData = data.filter(function(d) {
      return d["Disaster Type"] === "Lightning/Thunderstorms or Severe weather";
    });

    var StormData = data.filter(function(d) {
      return d["Disaster Type"] === "Storm (General) or Tornado or Tropical cyclone";
    });

    // 获取所有年份的数组
    var allYears = data.map(function(d) {
      return d["Start Year"];
    });

    // 创建一个比例尺，以确保 x 轴包含所有年份
    var xScale = d3.scaleBand()
      .domain(allYears)
      .range([0, 800])  // 适应你的图表宽度
      .padding(0.1);

    // 创建 SVG 容器
    var svg = d3.select("body").append("svg")
      .attr("width", 850)
      .attr("height", 1050)

  // 绘制框
  svg.append("rect")
    .attr("x", 20)       // 框的水平位置
    .attr("y", 30)      // 框的垂直位置
    .attr("width", 800) // 框的宽度，根据5张图的总宽度确定
    .attr("height", 972) // 框的高度，根据5张图的高度确定
    .attr("fill", "#F6F8F9")  // 透明填充
    .attr("stroke", "#D6D7D7") // 边框颜色，你可以根据需要更改
    .attr("stroke-width", 2); // 边框宽度，你可以根据需要更改

  for (var i = 1; i < 5; i++)
  {  
    svg.append("line")
    .attr("x1", 20)   // 起点 x 坐标
    .attr("y1", 200 * i)  // 起点 y 坐标
    .attr("x2", 820)  // 终点 x 坐标
    .attr("y2", 200 * i)  // 终点 y 坐标
    .attr("stroke", "#D6D7D7")  // 线的颜色
    .attr("stroke-width", 2); // 线的宽度
  }

    for (var i = 1; i < 9; i++)
  {  
    svg.append("line")
    .attr("x1", 93.523 * i + 20)   // 起点 x 坐标
    .attr("y1", 30)  // 起点 y 坐标
    .attr("x2", 93.523 * i + 20)  // 终点 x 坐标
    .attr("y2", 1000)  // 终点 y 坐标
    .attr("stroke", "#D6D7D7")  // 线的颜色
    .attr("stroke-width", 2); // 线的宽度
  }

  var text_ = ["旱灾", "洪涝", "暴雪和冰雹", "雷电", "风暴"]

    for (var i = 0; i < 5; i++)
  // 在特定位置添加文字并调整属性
  {
    svg.append("text")
    .attr("x", 50)
    .attr("y", 70 + 200 * i)
    .text(text_[i])
    .attr("font-family", "KaiTi") // 设置字体
    .attr("font-size", "25px")    // 设置字体大小
    .attr("fill", "#A29A9E");         // 设置字体颜色
  }

    // 创建 Drought 类型的条形统计图
    var droughtChart = svg.append("g")
      .attr("transform", "translate(20,0)");

    droughtChart.selectAll("rect")
      .data(droughtData)
      .enter().append("rect")
      .attr("x", function(d) { return xScale(d["Start Year"]); })
      .attr("y", function(d) { return 200 - d["Count"] * 30; })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return d["Count"] * 30; })
      .attr("fill", "#F2CD22");

    // 创建 Flood 类型的条形统计图
    var floodChart = svg.append("g")
      .attr("transform", "translate(20,200)");

    floodChart.selectAll("rect")
      .data(floodData)
      .enter().append("rect")
      .attr("x", function(d) { return xScale(d["Start Year"]); })
      .attr("y", function(d) { return 200 - d["Count"] * 8; })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return d["Count"] * 8; })
      .attr("fill", "#E19F39");

    var BlizzardChart = svg.append("g")
      .attr("transform", "translate(20,400)");

    BlizzardChart.selectAll("rect")
      .data(BlizzardData)
      .enter().append("rect")
      .attr("x", function(d) { return xScale(d["Start Year"]); })
      .attr("y", function(d) { return 200 - d["Count"] * 30; })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return d["Count"] * 30; })
      .attr("fill", "#468B8F");

    var LightningChart = svg.append("g")
      .attr("transform", "translate(20,600)");

    LightningChart.selectAll("rect")
      .data(LightningData)
      .enter().append("rect")
      .attr("x", function(d) { return xScale(d["Start Year"]); })
      .attr("y", function(d) { return 200 - d["Count"] * 20; })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return d["Count"] * 20; })
      .attr("fill", "#C55B49");

    
    var StormChart = svg.append("g")
      .attr("transform", "translate(20,800)");
      
    StormChart.selectAll("rect")
      .data(StormData)
      .enter().append("rect")
      .attr("x", function(d) { return xScale(d["Start Year"]); })
      .attr("y", function(d) { return 200 - d["Count"] * 10; })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return d["Count"] * 10; })
      .attr("fill", "#99B96B");

// 创建一个新的比例尺和坐标轴来展示年份
var xScaleYear = d3.scaleLinear()
  .domain([1980, 2023]) // 年份范围
  .range([0, 800]); // 适应你的图表宽度

// 创建 x 轴的生成器
var xAxis = d3.axisBottom(xScaleYear).ticks(10).tickFormat(d3.format("d")); // 设定 tick 数和格式化

// 在 SVG 容器中添加 x 轴
svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(20,1000)") // 调整 x 轴的垂直位置
  .call(xAxis)
  .selectAll(".x-axis text") // 选择 x 轴上的文本元素
  .style("font-size", "15px"); // 设置字体大小
  }
});